// 总体布局的样式
import './App.css'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

import React, { Component } from 'react'

export default class App extends Component {
    // 数据
    state = {
      todos: [
        {id:'001',name:'吃饭',done: true},
        {id:'002',name:'睡觉',done: true},
        {id:'003',name:'打豆豆',done: false},
      ]
    };



    // addTodo 用于添加一个Id
    addTodo = data => {

      // 获取员todos
      const { todos } = this.state;

      const newTodos = [data,...todos];

      // 更新状态
      this.setState({ todos: newTodos });
    }

    //  changeTodo 用于改变一个todo
    changeTodo = (id, done) => {
      // 必须获取状态中的todos
      const { todos } = this.state;

      const newTodos =  todos.map((todoObj)=>{
        if(todoObj.id === id) return {...todoObj,done}
        else return todoObj;
      });

      this.setState({todos: newTodos});
    }

    // 删除todo
    deleteTodo = (id)=> {
      // 获取原来的todos
      const { todos } = this.state;
    
      // 删除指定id的todo
      const newTodos = todos.filter((todo)=> {
        return todo.id !== id;
      });

      // 更新状态
      this.setState({todos:newTodos})
    }

    // 全选
    checkAllTodo = (done)=> {
      // 获取原来的todos
      const { todos } = this.state;
      // 加工数据
      const newTodo = todos.map((todoObj)=> {
        return {...todoObj,done}
      });

      this.setState({todos:newTodo})
    }

    //  清除所有已完成的todo
    clearTodoDone = ()=>{
        // 获取原来的todos
        const { todos } = this.state;
        const newTodo = todos.filter((todo)=>{
          return todo.done !== true
        });

        this.setState({todos:newTodo})
    }
  render() {
    const { todos } = this.state;
    return (
    <div className="todo-container">
      <div className="todo-wrap">
        {/* 头部 */}
        <Header addTodo = { this.addTodo }/> 
        {/* 主页面 */}
        <List  todos= { todos } changeTodo= {this.changeTodo} deleteTodo={this.deleteTodo}/>
        {/* footer */}
        <Footer todos= { todos } checkAllTodo = {this.checkAllTodo}
        clearTodoDone={this.clearTodoDone}/>
    </div>
  </div>
    
    )
  }
}